<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .image{
            display: inline-block;
            width:25px;
            height:25px;
            background:url(../img/点赞_1.png) no-repeat 0px 0px/25px 25px;
        }
        .image_text{
            margin-left:10px;
            line-height: 25px;
            vertical-align: top;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
        重大优惠<small>具体事项见店内海报</small><br>
        商品：<data value="ISBN:978-8-765-45378-8"><cite>三体三部曲</cite><small>&lt;I部、II部、III部&gt;</small></data>
        原价：<s>￥146</s>&nbsp;现价：￥78&nbsp;出版时间:<time datetime="2015-5-9">2015-5-9</time><br>
        我还会回来的<q>灰太狼</q><br>
        <dfn>正十七边形尺规作图问题</dfn>以下简称为<abbr title="正十七边形尺规作图问题">作图问题</abbr><br>
        <abbr>DNA</abbr>(<dfn>脱氧核糖核酸</dfn>)
        <code>let value=document.getElementById("btn_register");</code><br>
        <var>n</var> <var>n</var>-2<br>
        <bdo dir="rtl">文本的方向</bdo>是不一样的<br>
        <mark>我</mark>比较特殊<br>
        <ruby>OJ<rp><rt>(Orange Juice)</rt></rp></ruby><br>
        <ruby>汉<rp><rt>(han)</rt></rp></ruby><ruby>语<rp><rt>(yu)</rt></rp></ruby><br>
        <div style="width:200px;">
            <span style="font-size:30px;line-height:15px">关于行高更准确的解释为，两行文本的基线之间的距离。所谓的基线就是“四线三格”中的第三条线。</span>
        </div>
        <nav style="margin-top:10px;border:1px solid yellow">
            <div class="image"></div><span class="image_text">给我点赞</span>
        </nav>
        <div style="width:300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
                text-overflow属性是CSS3中新的属性，其可能的取值为：clip或ellipsis。
        </div>
</body>`
</html>